
<template>
  <div class="app">
    <topbar/>
   <personbar/>
    <div class="container" >
      <div class="leftpart bg-ffffff">
       <div class="hmenu">
         <nuxt-link class="on" to='/person/collect'> 我的收藏</nuxt-link>
         <nuxt-link to='/person/exchange'> 交易记录</nuxt-link>
         <nuxt-link to='/person/setup'> 账号设置</nuxt-link>
       </div>
        <!-- 收藏循环开始 -->
        <div class="one" v-for="(article,index) in articleInfo">
          <nuxt-link target="_blank" :to="'/article/?collkey='+ article.collkey">
            <div class="title">{{article.title}}</div>
            <img v-if="article.poster.length > 0" v-bind:src="article.poster" alt="">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;{{article.content}}……<span class="readmore">阅读全文</span></p>
          </nuxt-link>
          <div class="zcinfo">
            <span>{{article.magezineName}} {{article.year}}年第{{article.issue}}期 栏目 | {{article.columns}} 文 <span v-show="article.author != ''">| {{article.author}}</span></span>
            <span class="zan_down0" @click="zandown(article.collkey,1,index)" v-if="article.isDisagree==0"> </span>
            <span class="zan_down1" @click="zandown(article.collkey,0,index)" v-if="article.isDisagree==1"> </span>
            <span class="zan_up0" @click="zanup(article,1,index)" v-if="article.isAgree==0">赞同 {{article.agreeNum}} </span>
            <span class="zan_up1" @click="zanup(article,0,index)" v-if="article.isAgree==1">已赞同 {{article.agreeNum}} </span>
            <span class="cang0" @click="collect(article,1,index)" v-if="article.isCollect==0">{{article.likeNum}}</span>
            <span class="cang1" @click="collect(article,0,index)" v-if="article.isCollect==1">{{article.likeNum}}</span>
          </div>
        </div>
        <!-- 分页 -->
        <el-container v-loading="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.8)"></el-container>
        <div class="pagepart">
          <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="10"
            :total="totalNum">
          </el-pagination>
        </div>

      </div>
<!-- 左右分离-->
      <div class="rightpart">
          <Personright/>
      </div>

</div>
      <div class="gap100"></div>

<!--  <Bottombar/> -->
  </div>
</template>

<script>
import Topbar from '~/components/Topbar.vue'
import Personbar from '~/components/Personbar.vue'
import Personright from '~/components/Personright.vue'
import Bottombar from '~/components/Bottombar.vue'
import axios from 'axios'
import qs from 'qs'
export default {
  components: {
    Topbar,
    Bottombar,
    Personbar,
    Personright
  },
  data(){
    return{
      fullscreenLoading:false,
      user:{},
      isShare:false,
      totalNum:1,
      currentPage:1,
      pageCount:10,
      cateUniqueCode:'',
      cateInfo:'',
      articleInfo:'',
      havedes:true
    }
  },
  mounted(){
    this.user =  JSON.parse(localStorage.getItem("user"));
    if(this.user!=null && this.user!=null && this.user!=undefined && this.user!='{}'){
      this.getArticleList();

    }else{
      this.$router.push({path: '/'});
    }
    // this.getSessionUser();

  },
  methods:{
    getSessionUser(){

      let key=localStorage.getItem("user_unique_code");
      if(key!=null && key!="" && key!=undefined){
        console.log("key "+key)
        axios.post('https://wenku.qikan.com:11000/admin/lib/getTokenByUserId.html',qs.stringify({'key':key})
        )
          .then((response)=>{
            console.log("resultuser "+response.data);
            let result= response.data;
            if(result.code==1){
              console.log(result.data.trim())
              this.user=JSON.parse(result.data.trim());
              console.info("usermsg "+this.user)
              // if(this.user!=null && this.user!="" && this.user!=undefined){
              //   // this.poster=this.user.poster;
              //   // console.log("uuaa  "+this.user.mobile)
              //   // this.isLogin=true;
              // }
              this.getArticleList();
            }else{
              this.getArticleList();
            }
          })
          .catch((error)=>{
            console.log(error)
          })
      }else{
        this.$router.push({path: '/'});
      }


    },
    collect(rearticle,type,index){
      var vm = this;
      if(this.user!=null && this.user!="" && this.user!=undefined){
        var original = rearticle.magezineName+rearticle.year+'年第'+rearticle.issue+'期';
        axios.get('https://wenku.qikan.com:11000/article/collect?collkey='+rearticle.collkey+"&userCode="+vm.user.unique_code+"&type="+type
          +'&author='+rearticle.author+'&title='+rearticle.title+'&original='+original)
          .then(function(res){
            vm.articleInfo[index].isCollect = res.data.data.type;
            vm.articleInfo[index].likeNum = res.data.data.collectNum;
          })
      }else{
        alert("请先登录");
      }
    },

    zanup(rearticle,type,index){
      var vm = this;
      if(this.user!=null && this.user!="" && this.user!=undefined){
        var original = rearticle.magezineName+rearticle.year+'年第'+rearticle.issue+'期';
        axios.get('https://wenku.qikan.com:11000/article/agree?collkey='+rearticle.collkey+"&userCode="+vm.user.unique_code+"&type="+type
          +'&author='+rearticle.author+'&title='+rearticle.title+'&original='+original)
          .then(function(res){
            console.log(res.data.data);
            vm.articleInfo[index].isAgree = res.data.data.type;
            if(res.data.data.type = 1){
              vm.articleInfo[index].isDisagree = 0;
            }else{
              vm.articleInfo[index].isDisagree = 1;
            }
            // vm.articleInfo.list[index].isAgree = 0;
            vm.articleInfo[index].agreeNum = res.data.data.agreeNum;
          })
      }else{
        alert("请先登录");
      }
    },

    zandown(collkey,type,index){
      var vm = this;
      if(this.user!=null && this.user!="" && this.user!=undefined){
        axios.get('https://wenku.qikan.com:11000/article/disagree?collkey='+collkey+"&userCode="+vm.user.unique_code+"&type="+type)
          .then(function(res){
            console.log(res.data.data);
            vm.articleInfo[index].isDisagree = res.data.data.type;
            if(res.data.data.type == 1){
              vm.articleInfo[index].isAgree = 0;
            }
            vm.articleInfo[index].agreeNum = res.data.data.agreeNum;
            // vm.articleInfo.list[index].isAgree = 0;
          })
      }else{
        alert("请先登录");
      }
    },
    // collect(collkey,type,index){
    //   var vm = this;
    //   if(this.user!=null && this.user!="" && this.user!=undefined){
    //     axios.get('https://wenku.qikan.com:11000/article/collect?collkey='+collkey+"&userCode="+vm.user.unique_code)
    //       .then(function(res){
    //         vm.articleInfo[index].isCollect = res.data.data.type;
    //         vm.articleInfo[index].likeNum = res.data.data.collectNum;
    //       })
    //   }else{
    //     alert("请先登录");
    //   }
    // },
    getArticleList() {
      var vm = this;
      vm.fullscreenLoading = true;
      vm.cateUniqueCode = this.$route.query.id;
      if(this.user!=null && this.user!="" && this.user!=undefined){
        axios.get('https://wenku.qikan.com:11000/article/collect/list?userCode='+vm.user.unique_code+"&page="+vm.pageCount)
          .then(function(res){
            console.log(res);
            vm.articleInfo = res.data.data;
            vm.fullscreenLoading = false;
            if(vm.articleInfo!=null && vm.articleInfo!="" && vm.articleInfo!=undefined){
              vm.totalNum = res.data.data[0].allNum;
            }
          })
      }
    },
    handleCurrentChange(val) {
      this.pageCount = val * 10;
      this.currentPage = val;
      this.getArticleList();
    }
  }
}
</script>

<style scoped>
.hmenu{border-bottom:1px solid #F0F2F7; width: 100%; height: 52px; clear: both; padding:0 15px;}
.hmenu a{color:#1A1A1A; line-height: 50px; height: 50px; width: 70px; margin-right: 43px; display: inline-block; font-weight: 600;}
.on{ color: #225599 !important; border-bottom: 3px solid #0084FF;}


.one{ width: 100%; height: auto;  background-color: #fff; padding: 19px 30px 15px 15px;border-bottom: 3px solid #f2f5f7; }
.one:hover{ box-shadow:0 0 25px 2px rgb(0,0,0,.2); -moz-box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.2); -pie-background:rgba(0,0,0,.2);
  -webkit-box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.2);transition: .3s;z-index: 99999}
.one .title{font-size: 18px;color: #1A1A1A; line-height: 20px; width: 100%; margin-bottom: 14px; clear: both; font-weight: 600;}
.one p{font-size: 14px;color: #1A1A1A;text-align: justify;line-height: 24px; max-height: 72px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
.one img{ float: left; margin-right:18px; width: 178px; height: 105px;}

.info{ width: 100%;  text-align: right;font-size: 12px;color: #8590A6;margin-top: 10px; position: relative;}

.zan{ border-radius: 3px;  height: 25px; line-height: 25px; padding: 0 5px; padding-left:17px; margin-right:10px;}
.btn-up{ background:#E8F3FF url('../../assets/images/zan-up.png') 6px 5px no-repeat; background-size: 8px 8px; }
.btn-down{ background:#E8F3FF url('../../assets/images/zan-down.png') 6px 5px no-repeat; background-size: 8px 8px;}
.btn-sc1{width:16px; height: 16px; background: url('../../assets/images/icon-shoucang1.png'); background-size: 16px 16px; display: inline-block ;vertical-align: middle;margin-right:4px;margin-left:7px;}
.btn-sc0{ width:16px; height: 16px; background: url('../../assets/images/icon-shoucang0.png'); background-size: 16px 16px; display: inline-block ;vertical-align: middle;margin-right:4px;margin-left:7px;}
.btn-print{width:16px; height: 16px; background: url('../../assets/images/icon-print.png'); background-size: 16px 16px; display: inline-block ;vertical-align: middle;margin-right:4px;margin-left:7px;}
.btn-share{width:18px; height: 16px; background: url('../../assets/images/icon-share.png'); background-size: 18px 16px; display: inline-block ;vertical-align: middle; margin-right:4px; margin-left:7px;}


.share{ position: relative; }
.sharelevel{ width: 137px; height: 182px;text-align: left; position: absolute; z-index: 200;top: 32px; left: 0; background: #FCFCFC;border: 1px solid #F2F2F2;box-shadow: 0 2px 4px 0 rgba(181,181,181,0.50);border-radius: 2px; padding: 10px 15px; }
.sharelevel .list{ width: 100%; height: 40px; line-height: 40px; }

.icon-copy{width:20px; height: 20px; background: url('../../assets/images/share-copy.png'); background-size: 20px 20px; display: inline-block ;vertical-align: middle; margin-right:4px;}
.icon-qq{width:20px; height: 20px; background: url('../../assets/images/share-qq.png'); background-size: 20px 20px; display: inline-block ;vertical-align: middle; margin-right:4px;}
.icon-weibo{width:20px; height: 20px; background: url('../../assets/images/share-weibo.png'); background-size: 20px 20px; display: inline-block ;vertical-align: middle; margin-right:4px;}
.icon-weixin{width:20px; height: 20px; background: url('../../assets/images/share-weixin.png'); background-size: 20px 20px; display: inline-block ;vertical-align: middle; margin-right:4px;}

.pagepart{ width: 100%; height: 60px; margin: 40px 0;  text-align: center;}
.readmore{ display: inline-block;color: #175199 ;font-size: 14px;line-height: 24px; width: 70px;background: url('../../assets/images/more-down-arrow.png') right center no-repeat; background-size: 12px 8px;}
/*.zcinfo{ width: 100%;  text-align: right;font-size: 12px;margin-top: 10px; position: relative; height: 25px;}*/
/*.zan_up0{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 5px; padding-left:17px; margin-right:6px;display: inline-block;background:#E8F3FF url('../../assets/images/zan-up.png') 6px 8px no-repeat; background-size: 8px 8px; float: right;color:#0084ff;cursor:pointer;}*/
/*.zan_up1{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 5px; padding-left:17px; margin-right:6px;display: inline-block;background:#0084ff url('../../assets/images/zan-up1.png') 6px 8px no-repeat; background-size: 8px 8px; float: right; color:#fff;cursor:pointer;}*/
/*.zan_down0{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 10px; padding-left:17px; margin-right:10px;display: inline-block;background:#E8F3FF url('../../assets/images/zan-down.png') 10px 8px no-repeat; background-size: 8px 8px; float: right;color:#0084ff;cursor:pointer;}*/
/*.zan_down1{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 10px; padding-left:17px; margin-right:10px;display: inline-block;background:#0084ff url('../../assets/images/zan-down1.png') 10px 8px no-repeat; background-size: 8px 8px; float: right;color:#fff;cursor:pointer;}*/
/*.cang0{  height: 25px;  line-height: 25px; background: url('../../assets/images/icon-shoucang0.png') left center no-repeat; background-size: 14px 14px; display: inline-block ;margin-right:10px;margin-left:7px; float: right; padding-left: 20px;color:#8590A6;cursor:pointer;}*/
/*.cang1{  height: 25px; line-height: 25px;  background: url('../../assets/images/icon-shoucang1.png') left center no-repeat; background-size: 14px 14px; display: inline-block ;margin-right:10px;margin-left:7px; float: right; padding-left: 20px;color:#0084ff;cursor:pointer;}*/
/*.zcinfo{ width: 100%;  text-align: right;font-size: 12px;margin-top: 10px; position: relative; height: 25px;}*/
.zcinfo{ width: 100%;  text-align: left;font-size: 12px;margin-top: 10px; position: relative; height: 25px; color:#8590A6;}
.zan_up0{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 5px; padding-left:17px; margin-right:6px;display: inline-block;background:#E8F3FF url('../../assets/images/zan-up.png') 6px 8px no-repeat; background-size: 8px 8px; float: right;color:#0084ff;cursor:pointer;}
.zan_up1{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 5px; padding-left:17px; margin-right:6px;display: inline-block;background:#0084ff url('../../assets/images/zan-up1.png') 6px 8px no-repeat; background-size: 8px 8px; float: right; color:#fff;cursor:pointer;}
.zan_down0{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 10px; padding-left:17px; margin-right:10px;display: inline-block;background:#E8F3FF url('../../assets/images/zan-down.png') 10px 8px no-repeat; background-size: 8px 8px; float: right;color:#0084ff;cursor:pointer;}
.zan_down1{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 10px; padding-left:17px; margin-right:10px;display: inline-block;background:#0084ff url('../../assets/images/zan-down1.png') 10px 8px no-repeat; background-size: 8px 8px; float: right;color:#fff;cursor:pointer;}
.cang0{  height: 25px;  line-height: 25px; background: url('../../assets/images/icon-shoucang0.png') left center no-repeat; background-size: 14px 14px; display: inline-block ;margin-right:10px;margin-left:7px; float: right; padding-left: 20px;color:#8590A6;cursor:pointer;}
.cang1{  height: 25px; line-height: 25px;  background: url('../../assets/images/icon-shoucang1.png') left center no-repeat; background-size: 14px 14px; display: inline-block ;margin-right:10px;margin-left:7px; float: right; padding-left: 20px;color:#0084ff;cursor:pointer;}
</style>
